<template>
	<view>
		<view class="padding">
			<view class="padding bg">
				<view class=" u-flex">
					<view class="u-m-r-10">
						<u-avatar :src="goods.user.avr" mode="square" size="100">{</u-avatar>
					</view>
					<view class="u-flex-1 text-white margin-left-xs">
						<view class="u-font-16  text-bold">{{ goods.user.nick }}</view>
						<view class="u-font-14 margin-top-sm u-tips-color flex justify-between">
							<view class="text-blue">{{goods.money}}币/局</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding bg margin-top">
				<view class="flex justify-between  margin-top">
					<view class="text-lg" style="color: #A1A2B3;width: 140upx;">商品描述</view>
					<view class="text-white">{{ goods.description }}</view>
				</view>
				<view class="flex justify-between  margin-top">
					<view class="text-lg" style="color: #A1A2B3;width: 140upx;">购买数量</view>
					<!-- <view class="text-white">×1</view> -->
					<u-number-box v-model="value" min='1' bg-color="#27283C" color="#fff" @change="valChange">
					</u-number-box>
				</view>
				<view class="flex justify-between  margin-top">
					<view class="text-lg" style="color: #A1A2B3;width: 140upx;">单价</view>
					<view class="text-white">{{goods.money}}币/局</view>
				</view>
			</view>
			<view class="padding bg margin-top">
				<view class="flex justify-between">
					<view class="text-lg" style="color: #A1A2B3;margin-right: 20upx;">备注说明</view>
					<textarea class="text-white text-df flex-sub" placeholder="简单描述下您的要求"
						placeholder-style="text-align: right;" style="height: 200upx;"></textarea>
				</view>
			</view>
		</view>
		<view class="text-white flex justify-between cu-bar foot bg padding-lr">
			<view>
				实付：<text style="font-size: 38upx;margin-top: 8upx;">{{goods.money * value}}币</text>
			</view>
			<view class="">
				<u-button :custom-style="customStyle" @click="goNav()" shape="circle" :hair-line="false">立即支付</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				value: 1,
				order: {
					goodsId: 20,
					user: {
						id: 0
					},
					num: 1
				},
				customStyle: {
					width: '340upx',
					color: '#FFFFFF',
					background: "#2087fe",
					border: 0
				},
				goods: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.id);
			this.getData();
		},
		methods: {
			getData() {
				this.$myRequest({
					url: "/goods/getGoodsById",
					method: "get",
					data: {
						id: this.id
					}
				}).then(r => {
					this.goods = r.data.data;
					this.order.user.id = uni.getStorageSync("userId");
					console.log(this.goods);
				})
			},
			valChange() {
				this.order.num = this.value;
				console.log(this.order);

			},
			goNav() {
				this.order.goodsId = this.id;
				let that = this;
				this.$myRequest({
					url: "/order/add",
					method: "post",
					data: this.order
				}).then(r => {
					if (r.data.code == 200) {
						uni.showModal({
							title: '提示',
							content: '支付成功!',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/index/game/order?id=" + that.id,
									})
								} else if (res.cancel) {
									uni.showToast({
										title: "用户已取消",
										icon: "none"
									});
								}
							}
						})
					} else if (r.data.code == 701) { 
						uni.showModal({
							title: '提示',
							content: '余额不足，请充值!',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/my/wallet/index?id=" + uni.getStorageSync(
											"userId"),
										// 成功跳转失败跳转错误信息
										success(res) {
											console.log('成功啦', res);
										},
										fail(err) {
											console.log('失败啦', err);
										}
									})
								} else if (res.cancel) {
									uni.showToast({
										title: "用户已取消",
										icon: "none"
									});
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	textarea::-webkit-input-placeholder {
		color: red;

	}
</style>
